<template>
  <div class="container">
    <div class="title">请完善信息</div>
    <div class="title1">如实填写信息，通过企业认证将获取更优质的功能和服务</div>
    <el-divider></el-divider>
    <el-row class="er">
      <el-col :span="4">
        <div class="grid-content bg-purple bg-pic">
          <!-- 用户上传logo -->
          <el-upload
            class="avatar-uploader"
            action="/api/sys/no-limit/upload/single"
            :headers="this.$global.setUploadHeaders"
            accept
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="tip">用户上传</div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content bg-purple-light">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="公司名称:" prop="companyName">
              <el-input v-model="ruleForm.companyName" placeholder="请输入公司名称" class="int-mc"></el-input>
            </el-form-item>
            <el-form-item label="所属行业:" prop="industry.dictName" class="hangye">
              <el-select
                v-model="ruleForm.industry.dictName"
                @focus="getCompanyIndustry"
                placeholder="请选择行业"
              >
                <el-option
                  :label="item.dictName"
                  :value="item.dictName"
                  v-for="item in ruleForm.industry"
                >{{item.dictName}}</el-option>
                <!-- <el-option label="教育" value="教育"></el-option> -->
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content bg-purple">
          <el-form>
            <el-form-item label="公司性质:" prop="typeCode.dictName">
              <el-select
                v-model="ruleForm.typeCode.dictName"
                @focus="getCompanyNature"
                placeholder="请选择"
                style="width:320px"
              >
                <el-option
                  :value="item.dictName"
                  v-for="item in ruleForm.typeCode"
                >{{item.dictName}}</el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <!-- //用户公司详细地址 -->
    <el-row class="address-box">
      <el-col :span="6">
        <div class="grid-content bg-purple-dark">
          <el-form :model="ruleForm1" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="公司所在地:" prop="addrProvince">
              <el-select v-model="ruleForm.addrProvince" @focus="getAddrProvince" placeholder="请选择">
                <el-option
                  v-for="item in ProList"
                  :key="item.id"
                  :label="item.locationName"
                  :value="item.id"
                >{{item.locationName}}</el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-dark address-ruleForm">
          <el-select
            v-model="ruleForm.addrCity"
            @focus="getAddrCity"
            style="margin-top:6px"
            placeholder="请选择"
          >
            <el-option v-for="item in city" :key="item.id" :label="item.name" :value="item.name">
              <!-- {{item.name}} -->
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content bg-purple-dark address-ruleForm1">
          <el-input
            v-model="ruleForm.addressDetail"
            style="margin-top:6px;width:578px"
            placeholder="请输入详细地址"
          ></el-input>
        </div>
      </el-col>
    </el-row>
    <!-- //用户上传 营业执照 -->
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="营业执照:" prop="name">
              <el-upload
                class="upload-demo"
                ref="upload"
                action="/api/sys/no-limit/upload/single"
                :on-preview="handlePreview"
                :on-success="handleAvatarSuccess1"
                :on-remove="handleRemove"
                :auto-upload="false"
                :on-change="handleChange"
                :headers="this.$global.setUploadHeaders"
                accept
              >
                <el-button slot="trigger" size="small" type="primary">上传</el-button>
                <el-button
                  style="margin-left: 10px;"
                  size="small"
                  type="success"
                  @click="submitUpload"
                >上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">注：图片格式为 JPG/JPEG/PNG/PDF 大小在2MB内</div>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item label="社会信用代码" prop="cfuscc">
              <el-input v-model="ruleForm.cfuscc" class="input-fr"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <!-- //法人姓名和信息 -->
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item label="法人姓名:" prop="legalEntityName">
              <el-input v-model="ruleForm.legalEntityName" class="input-fr"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item label="法人身份证号:" prop="legalEntityIdcard">
              <el-input v-model="ruleForm.legalEntityIdcard" class="input-fr"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <!-- //对公银行和银行账号 -->
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form :model="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="对公银行账号：" prop="bankName">
              <el-input v-model="ruleForm.bankName" placeholder="请输入" class="input-fr"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-form>
            <el-form-item label="对公银行开户行：" prop="bankCode">
              <el-select
                v-model="ruleForm.bankCode.dictName"
                @focus="getBankName"
                placeholder="请选择"
                class="input-fr1"
              >
                <el-option
                  :label="item.dictName"
                  :value="item.dictName"
                  v-for="item in ruleForm.bankCode"
                >{{item.dictName}}</el-option>
                <!-- <el-option label="建设银行" value="建设银行"></el-option> -->
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <!-- //提交和取消 -->
    <el-row :gutter="20">
      <el-col :span="12" :offset="8">
        <div class="grid-content bg-purple">
          <el-button type="primary" @click="gotomessage">提交</el-button>
          <el-button type="primary">取消</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false, //上传营业执照
      imageUrl: '',
      ruleForm: {
        companyName: '', //公司名
        typeCode: '', //公司性质
        industry: '', //公司行业
        addrProvince: '', //公司所在省
        addrCity: '', //公司所在市
        addressDetail: '', //公司所在地址
        cfuscc: '', //社会信用代码
        legalEntityName: '', //法人姓名
        legalEntityIdcard: '', //法人身份证
        bankName: '', //对公银行账号
        bankCode: '', //对公银行名称
        id: '', //公司id
        tentId: '', //租户id
        tentAttachmentId: 'string', //用户上传的logo ID
        attachmentBpId: 'string' //营业执照附件id
      },
      ruleForm1: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入社会信用代码', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        addrProvince: [
          { required: true, message: '请输入公司所在地', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        cfuscc: [
          { required: true, message: '请输入社会信用代码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        legalEntityName: [
          { required: true, message: '请输入法人姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        legalEntityIdcard:[
          { required: true, message: '请输入法人身份证', trigger: 'blur' },
          { min: 16, max: 18, message: '长度在 16 到 18 个字符', trigger: 'blur' }
        ]
      },
      //用户的企业信息
      companyInformationVO: {
        addrCity: 'string', //地址市
        addrProvince: 'string', //地址省
        addressDetail: 'string', //详细地址
        areaCounty: 'string', //地址县
        attachmentBpId: 'string', //营业执照附件id
        bankCode: 'string', //对公银行账号名称
        bankName: 'string', //对公银行账号
        cfuscc: 'string', //社会统一信用代码
        id: 'string', //公司id
        industryCode: 'string', //公司所属行业的code
        industryName: 'string', //公司所属行业的中文名称
        legalEntityIdcard: 'string', //法人身份证
        legalEntityName: 'string', //法人姓名
        tentAttachmentId: 'string', //用户上传的logo
        tentId: 'string', //租户id
        typeCode: 'string', //公司性质
        typeName: 'string' //公司性质中文
      },
      ProList: {}, //所有的省
      city: {}, //市
      key: ''
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    handleAvatarSuccess(res, file) {
      console.log(res.data.id)
      this.ruleForm.tentAttachmentId = res.data.id
      // console.log(file)
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    handleAvatarSuccess1(res, file) {
      console.log(res.data.id)
      this.ruleForm.attachmentBpId = res.data.id
    },
    handleChange(file, fileList) {
      console.log(file)
      this.$refs.upload.submit()
      // this.fileList = fileList.slice(-3);
    },

    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    handlePreview() {},
    handleRemove() {},
    submitUpload() {
      //  this.$refs.upload.submit();
    },
    //提交用户的所有信息
    gotomessage() {
      console.log('ok')
      console.log(this.ruleForm)
      this.ruleForm.bankCode = this.ruleForm.bankCode.dictName
      this.ruleForm.typeCode = this.ruleForm.typeCode.dictName
      this.ruleForm.industry = this.ruleForm.industry.dictName
      this.setUserMassageCookie()

      this.getInforUpdate()
      this.$router.push('/companyinfochangemsg')
    },
    //设置cookie
    setUserMassageCookie() {
      window.localStorage.setItem('addrCity', this.ruleForm.addrCity)
      window.localStorage.setItem('addrProvince', this.ruleForm.addrProvince)
      window.localStorage.setItem('addressDetail', this.ruleForm.addressDetail)
      window.localStorage.setItem(
        'attachmentBpId',
        this.ruleForm.attachmentBpId
      )
      window.localStorage.setItem('bankCode', this.ruleForm.bankCode)
      window.localStorage.setItem('bankName', this.ruleForm.bankName)
      window.localStorage.setItem('cfuscc', this.ruleForm.cfuscc)
      window.localStorage.setItem('companyName', this.ruleForm.companyName)
      window.localStorage.setItem('id', this.ruleForm.id)
      window.localStorage.setItem('industry', this.ruleForm.industry)
      window.localStorage.setItem(
        'legalEntityIdcard',
        this.ruleForm.legalEntityIdcard
      )
      window.localStorage.setItem(
        'legalEntityName',
        this.ruleForm.legalEntityName
      )
      window.localStorage.setItem(
        'tentAttachmentId',
        this.ruleForm.tentAttachmentId
      )
      window.localStorage.setItem('tentId', this.ruleForm.tentId)
      window.localStorage.setItem('typeCode', this.ruleForm.typeCode)
    },

    perfectInforList() {},
    //获取当前用户的企业信息
    async getInforCurrentMsg() {
      const { data: res } = await this.$http.get('company/information/current')
      this.ruleForm.id = res.data.id
      this.ruleForm.tentId = res.data.tentId
    },
    //获取所有的省
    async getAddrProvince() {
      const { data: res } = await this.$http.get('sys/list/location/00')

      this.ProList = res.rows
      this.ruleForm.addrCity = ''
    },
    //通过省获取所有的市
    async getAddrCity() {
      const { data: res } = await this.$http.get(
        '/sys/list/sublocation/' + this.ruleForm.addrProvince
      )
      this.city = res.rows

      var ProList = this.ProList
      var that = this
      //通过省的id找回对应的省,并赋值
      ProList.forEach(item => {
        if (item.id == that.ruleForm.addrProvince) {
          that.ruleForm.addrProvince = item.locationName
          // console.log(that.ruleForm.addrProvince,111)
        }
      })
    },
    //完善用户的企业信息接口
    async getInforUpdate() {
      const { data: res } = await this.$http.post(
        'company/information/update',
        this.ruleForm
      )
      console.log(res)
    },
    //获取字典中公司的所属性质
    async getCompanyNature() {
      const { data: res } = await this.$http.get('sys/list/dicts/30023')
      console.log(res.data.dictionaries)
      this.ruleForm.typeCode = res.data.dictionaries
      // this.ruleForm.typeCode.dictName
      let dictionaries = res.data.dictionaries
      let arr = []
    },
    //获取字典中公司的所属行业
    async getCompanyIndustry() {
      const { data: res } = await this.$http.get('sys/list/dicts/30017')
      console.log(res)
      this.ruleForm.industry = res.data.dictionaries
      // this.ruleForm.industry = this.ruleForm.industry.dictName
    },
    //获取字典中对公银行开户行
    async getBankName() {
      const { data: res } = await this.$http.get('sys/list/dicts/10024')
      console.log(res)
      this.ruleForm.bankCode = res.data.dictionaries
      // this.ruleForm.bankCode = this.ruleForm.bankCode.dictName
    }
  },
  created() {
    this.getInforCurrentMsg()
  }
}
</script>
<style lang="less" scoped>
.container {
  width: 1200px;
  margin: auto;
  .title {
    margin: auto;
    margin-top: 100px;
    width: 126px;
    height: 24px;
    font-size: 25px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: rgba(102, 102, 102, 1);
    line-height: 26px;
  }
  .title1 {
    margin: auto;
    margin-top: 30px;
    width: 534px;
    height: 21px;
    font-size: 21px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: rgba(102, 102, 102, 1);
    line-height: 26px;
  }
}
.er {
  margin-top: 20px;
}
.el-input {
  height: 40px !important;
  //  line-height: 40px!important;
}
.el-upload {
  border: 1px dashed #d9d9d9;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 0px;
  color: #8c939d;
  width: 198px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.tip {
  //   margin-left: 50px;
  margin: auto;
  width: 70px;
  font-size: 16px;
  color: #42a2ff;
}
.hangye {
  margin-top: 60px;
}
.int-mc {
  width: 65%;
}
.er {
  margin-top: 45px;
}
.bg-pic {
  background-color: #eff3f8;
  background-image: url(../../assets/Verification/u3374.png);
  background-repeat: no-repeat;
  background-position: center;
}
.address-ruleForm,
.address-ruleForm1 {
  margin-left: 15px;
}
.address-box {
  margin-top: 25px;
}
.input-fr {
  width: 77%;
}
.input-fr1 {
  width: 61%;
}
</style>